<template>
  <div class="share-page">
    <el-card class="share-card">
      <template #header>
        <div class="card-header">
          <h2>表情包分享</h2>
        </div>
      </template>

      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="3" animated />
      </div>

      <div v-else-if="error" class="error-container">
        <el-empty :description="error">
          <template #extra>
            <el-button type="primary" @click="$router.push('/')">
              返回首页
            </el-button>
          </template>
        </el-empty>
      </div>

      <div v-else class="share-content">
        <div class="creator-info">
          <el-avatar 
            :size="40" 
            :src="shareInfo.creator.avatar"
          >
            {{ shareInfo.creator.nickname?.charAt(0) }}
          </el-avatar>
          <div class="creator-detail">
            <h4>{{ shareInfo.creator.nickname || shareInfo.creator.username }}</h4>
            <p>分享于 {{ formatDate(shareInfo.created_at) }}</p>
          </div>
        </div>

        <div class="image-container">
          <el-image 
            :src="shareInfo.image_url" 
            fit="contain"
            :preview-src-list="[shareInfo.image_url]"
          />
        </div>

        <div class="emoji-info">
          <p class="description">{{ shareInfo.text }}</p>
          <el-tag size="small">{{ shareInfo.style }}</el-tag>
        </div>

        <div class="action-buttons">
          <el-button 
            type="primary" 
            @click="downloadImage"
            :loading="downloading"
          >
            <el-icon><Download /></el-icon> 下载
          </el-button>
          <el-button 
            type="success"
            @click="$router.push('/')"
          >
            <el-icon><Picture /></el-icon> 我也要生成
          </el-button>
        </div>

        <div class="share-footer">
          <p class="expires-hint">
            此分享将于 {{ formatDate(shareInfo.expires_at) }} 过期
          </p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Download,
  Picture,
  Warning,
  Share,
  Refresh
} from '@element-plus/icons-vue'
import axios from 'axios'

const API_BASE_URL = 'http://localhost:5000'
const route = useRoute()

const loading = ref(true)
const error = ref('')
const downloading = ref(false)
const shareInfo = ref(null)

// 获取分享信息
const fetchShareInfo = async () => {
  try {
    const response = await axios.get(
      `${API_BASE_URL}/api/share`,
      { params: { id: route.params.id } }
    )
    
    if (response.data.status === 'success') {
      shareInfo.value = response.data.data
    }
  } catch (error) {
    if (error.response?.status === 404) {
      error.value = '分享不存在或已过期'
    } else {
      error.value = '加载失败'
    }
  } finally {
    loading.value = false
  }
}

// 下载图片
const downloadImage = async () => {
  if (!shareInfo.value?.image_url) return
  
  downloading.value = true
  try {
    const response = await axios.get(shareInfo.value.image_url, {
      responseType: 'blob'
    })
    const url = window.URL.createObjectURL(response.data)
    const link = document.createElement('a')
    link.href = url
    link.download = `emoji_${route.params.id}.png`
    link.click()
    window.URL.revokeObjectURL(url)
    ElMessage.success('下载成功')
  } catch (error) {
    ElMessage.error('下载失败')
  } finally {
    downloading.value = false
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

onMounted(() => {
  fetchShareInfo()
})
</script>

<style scoped>
.share-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0;
  color: var(--el-text-color-primary);
}

.loading-container,
.error-container {
  padding: 40px 0;
}

.creator-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.creator-detail h4 {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.creator-detail p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.image-container {
  text-align: center;
  margin: 20px 0;
}

.image-container .el-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.emoji-info {
  margin: 20px 0;
}

.description {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
}

.share-footer {
  text-align: center;
  margin-top: 20px;
}

.expires-hint {
  margin: 0;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style> 